<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ECharts</title>
        <style>
            #canvas {
                width: 600px;
                height: 450px;
            }
        </style>
    </head>
    <body>
        <!--
            HTML页面的三要素：
                ~ 标签 - content
                ~ CSS - display
                ~ JavaScript  - behavior
                    - ECMAScript - ES
                    - BOM - Browser Object Model - 浏览器对象模型 - window
                        ~ alert() / prompt() / confirm()
                        ~ setTimeout() / setInterval()
                        ~ scrollTo()
                    - DOM - Document Object Model - 文档对象模型 - document
                        ~ getElementById() / getElementsByTagName()
                        ~ querySelector() / querySelectorAll()
        -->
        <!-- 绘制图表的区域 -->
        <div id="canvas"></div>
        <!-- 通过CDN服务器导入ECharts库 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
        <!-- 通过下面的JavaScript代码实现图表渲染 -->
        <script>
            // 通过document对象获取页面元素
            let canvasDiv = document.querySelector('#canvas')
            // 将div初始化为一个绘图对象
            let myChart = echarts.init(canvasDiv)
            // 通过异步网络请求从数据接口获取数据，获取到数据以后通过echarts进行渲染
            fetch('http://10.7.177.116:5000/api/stocks?start=2017-2-1&end=2017-2-28')
                .then(resp => resp.json())
                .then(json => {
                    // 定制K线图的图表数据和选项
                    let option = {
                        title: {
                            text: '2017年2月',
                            left: '40%'
                        },
                        xAxis: {
                            data: json.x_axis
                        },
                        yAxis: {
                            scale: true,
                        },
                        series: [{
                            type: 'k',
                            data: json.y_axis
                        }]
                    }
                    // 通过绘图的setOption方法传入数据和参数
                    myChart.setOption(option)
                })
        </script>
    </body>
</html>